<template>
  <div>
    <div v-for="(driver, index) in items" :key="index" class="dispatch_car" :class="{dispatch_car1: driver.selected}" @click="chooseItem(index)">
      <div class="dispatch_car_top">
        <h1>
          {{driver.tractorNumber}}<font v-if="driver.trailerNumber">&nbsp;▪&nbsp;{{driver.trailerNumber}}</font>
          <span v-if="driver.isSelfOperation===1">自</span>
          <span v-if="driver.isSelfOperation===0">外</span>
          <i v-if="driver.gpsooInfo && driver.gpsooInfo.device_info_new===0" class="cor1"></i>
          <!-- 离线 -->
          <i v-if="driver.gpsooInfo && driver.gpsooInfo.device_info_new===3" class="cor3"></i>
          <!-- 静止状态 -->
          <i v-if="driver.gpsooInfo && driver.gpsooInfo.device_info_new===4" class="cor4"></i>
        </h1>
        <p>{{driver.name||'--'}}&nbsp;▪&nbsp;{{driver.phone||'--'}}</p>
        <p>今日箱量 {{driver.containerNumTotal || 0}}</p>
      </div>
      <div v-if="driver.selected" class="dispatch_car_cen">
        <ul v-if="!driver.orderList || driver.orderList.length > 0">
          <li v-for="(v, i) in driver.orderList" :key="i"><font style="cursor: pointer;" @click="openOrder(v.truckOrderId)">{{v.truckOrderCode}}</font>{{opeTypeStr(v.opeType)}}</li>
        </ul>
        <ul v-if="!driver.orderList || driver.orderList.length === 0">暂无数据</ul>
        <h2>
          <a @click="dispatchIt">派单</a>
          <template v-if="driver.isSelfOperation===1">
            <a @click="trackIt">跟踪</a>
            <a @click="playback">回放</a>
          </template>
        </h2>
      </div>
    </div>
  </div>
</template>

<script>
import {mixin} from './common'

export default {
  name: 'right-driver-items',
  mixins: [mixin],
  props: {
    source: {
      type: Array,
      default () {
        return []
      }
    },
    selectId: Number
  },
  data () {
    return {
      items: this.createItems()
    }
  },
  methods: {
    createItems () {
      return this.source.map(driver => {
        driver['selected'] = driver.tractorId === this.selectId
        return driver
      })
    },
    chooseItem (index) {
      this.items = this.items.map(driver => {
        driver['selected'] = false
        return driver
      })
      this.items[index].selected = true
      this.$emit('click', this.items[index])
    },
    playback () {
      this.$emit('operateCar', 'playback')
    },
    dispatchIt () {
      this.$emit('operateCar', 'dispatch')
    },
    trackIt () {
      this.$emit('operateCar', 'track')
    },
    openOrder (truckOrderId) {
      window.open(`/landCenter/orderDispatch/${truckOrderId}`, '_blank')
    }
  },
  mounted () {
  },
  watch: {
    source () {
      this.items = this.createItems()

      // const t = document.querySelector('.dispatch_car1')
      // if (t) t.scrollIntoView(true)
    }
  }

}
</script>
